<template>
  <div>
    <div class="card">
      <h1>组件</h1>
      <List class="js_list_comp"></List>
      <Mybtn class="js_get_data" value="获取数据"></Mybtn>
    </div>


    <div class="card">
      <MyInput class="js_my_input"></MyInput>
      <div class="js_input_val"></div>
    </div>

  </div>
</template>
<import name="List" src="./components/List.jq"></import>
<import name="MyInput" src="./components/MyInput.jq"></import>
<script>
  export default function ($) {
    $('.js_get_data').on('myclick', function () {
      $.ajax({
        url: './public/list.json',
        success: function (res) {
          // 把参数传递给子组件
          $(".js_list_comp").data('list', res);
        }
      });
    });


    // 接受子组件的参数
    $('.js_my_input').on('confirm', (ev, param) => {
      $(".js_input_val").html(param);
    });
  }
</script>
<style>
  .card {
    margin: 30px;
    border: 10px solid #999;
    border-radius: 20px;
    padding: 20px;
  }
</style>